<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no"/>
		<title>身份识别</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../bill/css/supportDefineDetail.css" />
	</head>
	<style>
                * { margin:0;padding:0;}
                ul,li{list-style-type:none; margin:0;padding:0;}
                                
            #foot_div {
                    display: block;
                    bottom: 0px;
                    min-width: 200px;
                    line-height: 30px;
                    width:100%;
                    position: fixed;
                    text-align: center;
                    color: #fff;
                    background: #000;
             }
             #foot_div ul {width:99%;margin:0 auto;}
                 #foot_div li{width:33%;float:left;}
                 #foot_div ul li:nth-of-type(1){text-align:left;}
             #foot_div ul li:nth-of-type(2){text-align:center;}
                 #foot_div ul li:nth-of-type(3){text-align:right;}
        </style>
         
        <body>
                <div id="foot_div">   
                        <ul>
                                <li οnclick="back();">取消</li>
                                <li οnclick="resetImageClip();">重置</li>
                                <li οnclick="saveImageClip();">选取</li>
                        </ul>
                </div>
        </body>
	<script src="../../script/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/doT.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/config.js"></script>
	<script type="text/javascript" src="../../script/client.api.js"></script>
	<script type="text/javascript" src="../../script/aui-alert.js"></script>
	<script type="text/javascript" src="../../script/debug.js"></script>
	<script type="text/javascript">
		var FNImageClip;
	var BASE_IMG_HEAD_TEMP_PATH="fs://imageClip/result.png";
		
	apiready = function(){
		var img_src = api.pageParam.img_src;
		FNImageClip = api.require('FNImageClip');
		openImageClip(img_src);
    };
	//对头像进行裁剪
	function openImageClip(img_src){
        var rect_w = api.winWidth;
        var rect_h = api.winHeight;
        var clip_w = parseInt(rect_w - 2);
        var clip_y = parseInt((rect_h - clip_w - 30) / 2);
        FNImageClip.open({
            rect: {
                x: 0,
                y: 0,
                w: rect_w,
                h: rect_h - 30
            },
            srcPath: img_src,
            style: {
                    //（可选项）字符串类型；图片裁剪控件遮罩层背景，支持 rgb，rgba，#；默认：#888
			mask: 'rgba(0,0,0,.7)',
			clip: {
			    //（可选项）数字类型；裁剪区域的宽度，当 appearance 为 circular 时，w 为半径；默认：rect.w / 2
				w: clip_w,
				//（可选项）数字类型；裁剪区域的高度，当 appearance 为 circular 时，h 无效；默认：w
				h: clip_w,
				x: 0,
				y: clip_y,
				borderColor: '#0f0',
				borderWidth: 1,
				//（可选项）字符串类型；裁剪区域的形状，支持 circular | rectangle；默认：rectangle
				appearance: 'rectangle'
			    }
			},
			mode : 'clip',
			fixedOn: api.frameName
			}, function(ret, err){        
			 // alert(ret.status);         
		});
	}	
	//返回应用页面
    function back() {
        closeImageClip();
        api.closeFrame({
            name : 'imageClipFrame'
        });
    }
           
    //关闭裁剪组件
    function closeImageClip(){
       FNImageClip.close();
    }
           
    //重置裁剪组件
    function resetImageClip(){
         FNImageClip.reset();
    }
    
    //保存裁剪之后的图片        
    function saveImageClip(){
        FNImageClip.save({
            destPath: BASE_IMG_HEAD_TEMP_PATH,
            copyToAlbum: false,
            quality: 1
        },function(ret, err){
            if(err) {
                api.toast({
                    msg:'服务器繁忙，请稍后再试'
                });
            }else{
                 //进行文件上传
                 uploadTheHead(ret.destPath);
            }      
        });
    }
            
    //该方法用来上传文件
    function uploadTheHead(img_str){
    	api.showProgress({
    		title: '头像上传中',
			modal: true
        });
        img_str="\"file1\":\""+img_str+"\"";
        img_str = eval('('+("{"+img_str+"}")+')');
    	api.ajax({
		    url:$api.getStorage("url"),
		    method:'post',
		    dataType:'text',
		    data:{
		    	values:{
		        	'user_id':$api.getStorage("u_id"),
		        	'user_name':$api.getStorage("u_name"),
		        	'time':new Date().getTime()
		    	},	    	
		    	files:img_str
		    }
		},function(ret, err){
			api.hideProgress();//隐藏进度提示框
		    $api.setStorage("u_path",ret);//将ajax返回来图片路径存入到sorage中用来显示头像
		    //返回应用界面
		    closeImageClip();//关闭当前图片剪切功能
            api.closeFrame({
                name : 'imageClipFrame'
            });
            api.execScript({
            	name:'my_win',//刷新头像所在window
                script: 'refreshWin();'
            });
		});
    }
    /*
    注意点：

a、BASE_IMG_HEAD_TEMP_PATH是自己随便定义的名称，其中的内容也可以随便定义。但是一定要设置，因为必须给裁剪好的图片一个保存的地方然后才能上传到服务器啊。

b、有时候选图片的时候图片很清晰，选完了到裁剪页面时图片就很模糊了，这个其实不是FNImageClip模块的问题而是api.getPicture()的问题，将quality设置成100、targetWidth和targetHeight两个属性不添加即可。

quality属性用来设置图片的质量，从0-100，默认是50，这就已经很模糊了，设置成100之后选的是什么裁剪时看到的就是什么。

targetWidth和targetHeight两个属性不添加，并不是不复制，而是在调用api.getPicture()不要加这两个属性，让它默认就行。这两个属性是用来参考压缩图片大小的，具体怎么参考和怎么计算官网上说明但是呢计算的结果跟我们设置的值总不一样，所以最好还是不要用了。
————————————————
版权声明：本文为CSDN博主「wjiaoling136」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wjiaoling136/article/details/84883847
    */
        </script>
</html>